<template>
     <div id="home" class="wrapper">
     <nav-bar class="home-nav">
       <div slot="center">购物街</div>
     </nav-bar>
       <tab-control
      :titles="titles"
      @tabClick ="tabClick"
      ref="tabControl2"
      v-show="isTabShow"
      />
     <scroll
     class="content"
     ref="scroll"
     @scroll="contentScroll"
     :probe-type="3"
     :pull-up-load="true"
     @pullingUp="loadMore"
     :observeImage="true"
     >
        <!-- 轮播图组件 ,还需要传入图片-->
      <home-swiper :banners="banners"  @swiperImageLoad="swiperImageLoad"/>
      <!-- 推荐组件、 -->
      <home-recommend :recommends ="recommends"/>
      <!-- 本周流行 -->
      <feature />
      <tab-control
      :titles="titles"
      @tabClick ="tabClick"
      ref="tabControl1"
      v-show="!isTabShow"
      />
      <!-- 商品展示 -->
      <goods-list :goods="showGoods" />
     </scroll>

      <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
     </div>
</template>
<script>
import NavBar from '@/components/common/navbar/NavBar'
import HomeSwiper from './childCamps/HomeSwiper'
import HomeRecommend from './childCamps/HomeRecommend'
import Feature from './childCamps/Feature'
import TabControl from '@/components/content/tabcontrol/TabControl'
import GoodsList from '@/components/content/goods/GoodsList'
import Scroll from '@/components/common/scroll/Scroll'
import BackTop from '@/components/content/backTop/BackTop'
import {getHomeMultidata,getHomeGoods} from '@/network/home.js'
export default {
    name:'Home',
    components:{
      NavBar,
      HomeSwiper,
      HomeRecommend,
      Feature,
      TabControl,
      GoodsList,
      Scroll,
      BackTop
    },
    data() {
        return {
           banners:[],
           recommends:[],
           titles:['流行','新款','精选'],
           goods:{
             pop: { page: 0, list: [] },
             new: { page: 0, list: [] },
             sell: { page: 0, list: [] }
           },
           currentType:'pop',
           isShowBackTop:false,
           tabControlTop:null,
           isTabShow:false,
           saveY:0
        }
    },
    computed:{
       showGoods() {
         return this.goods[this.currentType].list
       }
    },
    created(){
      // 请求多个数据
      // getHomeMultidata().then((res)=>{
      //   // console.log(res);
      //    this.banners = res.data.banner.list
      //    this.recommends = res.data.recommend.list
      // }),
      this.getHomeMultidata()
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    // 回到定位的位置
    activated() {
      this.$refs.scroll.scrollTo(0,this.saveY,0)
    },
    // 记录离开首页时此时的高度
    deactivated() {
      this.saveY = this.$refs.scroll.getScrollY()
    },
    mounted() {
        // this.tabControlTop
        // 由于考虑到图片加载的时间，所以在mounted里面获取的offsetTop不正确
        // console.log(this.$refs.tabControl.$el.offsetTop)
    },
    methods: {
      swiperImageLoad(){
          this.tabControlTop = this.$refs.tabControl1.$el.offsetTop
      } ,
      backClick(){
        //  console.log(this.$refs.scroll.message)
        //  设置时间，回滚到顶部
         this.$refs.scroll.scrollTo(0,0)

      },
      contentScroll(position) {
        // console.log(position)
         this.isShowBackTop = (-position.y) > 1000

        //  决定是否吸顶 44是顶部购物车的高度
        this.isTabShow = (-position.y) > this.tabControlTop - 44
      },
      // 加载更多
      loadMore(){
          this.getHomeGoods(this.currentType)

          this.$refs.scroll.refresh()
      },
      getHomeMultidata(){
        getHomeMultidata().then((res) =>{
            this.banners = res.data.banner.list
            this.recommends = res.data.recommend.list
         })
      },
      getHomeGoods(type) {
       const page = this.goods[type].page + 1;
        getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        // console.log(this.goods[type].list);
        this.$refs.scroll.finishPullUp()
      });
    },

      tabClick(index){
        switch (index) {
         case 0:
          this.currentType = "pop";
          break;
         case 1:
          this.currentType = "new";
          break;
         case 2:
          this.currentType = "sell";
          break;
       }
       this.$refs.tabControl1.currentIndex = this.index
       this.$refs.tabControl2.currentIndex = this.index
      }
    },
}
</script>
<style scoped>
/* .wrapper{
  height:100vh;
  position: relative;

}
.home-nav{
    background-color: var(--color-tint);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
} */
/* .content{

    height: calc(100% - 84px);
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
}
.tab-control{
   z-index:10
} */
.wrapper {
  height: 100vh;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  font-weight: 700;
  /* 为了在使用原生滚动时，导航栏不随着内容滚动 */
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9; */
}
.content {
  overflow: hidden;
  height: calc(100% - 84px);
}
</style>
